<!-- 标签卡 -->
<template>
    <div class="li-label">
        <div v-if="type == 'around'" class="around-box">
            <div :class="[`li-label-around`]">
                <div class="li-label-around-left">
                    <svg class="li-label-around-left-svg" width="200" height="110" viewBox="90 -50 400 400">
                        <defs>
                            <linearGradient :id="`linear-${theme}`" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" :stop-color="linearGradient.startColor" />
                                <stop offset="100%" :stop-color="linearGradient.stopColor" />
                            </linearGradient>

                            <linearGradient :id="`linear-stroke-${theme}`" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" :stop-color="linearGradient.startColor" />
                                <stop offset="100%" :stop-color="linearGradient.stopColor" />
                            </linearGradient>
                        </defs>
                        <polygon class="triangle" :fill="`url(#linear-${theme})`" :stroke="`url(#linear-stroke-${theme})`" stroke-linejoin="round" points="0,0 420,0 80,300 0,300 "></polygon>
                    </svg>
                    <div class="li-label-around-left-content">
                        <slot name="left">
                            <div class="li-label-around-left-content-title">{{ indexTitle }}</div>
                            <div class="li-label-around-left-content-index">{{ index }}</div>
                        </slot>
                    </div>
                </div>
                <div class="li-label-around-right">
                    <div class="li-label-around-right-content flex-center flex-col">
                        <slot>
                            <div class="li-label-around-right-content-icon">
                                <div :class="[`iconfont`, contentIcon]"></div>
                            </div>
                            <div class="li-label-around-right-content-line"></div>
                            <div class="li-label-around-right-content-text">
                                <spen class="li-label-around-right-content-text-color" :style="{ color: linearGradient.textColor }">{{ contentTitle }}</spen>
                                {{ contentSubTitle }}
                            </div>
                        </slot>
                    </div>
                </div>
            </div>
        </div>

        <div v-else-if="type == 'second'" class="second-box">
            <div :class="[`li-label-second`]">
                <div class="li-label-second-left" :style="{ background: `linear-gradient(to bottom left, ${linearGradient.startColor},${linearGradient.stopColor})` }">
                    <div class="li-label-second-left-content">
                        <slot name="left">
                            <div class="li-label-second-left-content-title">{{ indexTitle }}</div>
                            <div class="li-label-second-left-content-index">{{ index }}</div>
                        </slot>
                    </div>
                </div>
                <div class="li-label-second-right flex flex-row-around">
                    <slot>
                        <div class="li-label-second-right-content-space flex-center">
                            <div :class="[`iconfont`, contentIcon]"></div>
                        </div>
                        <div class="li-label-second-right-content-line"></div>
                        <div class="li-label-second-right-content-space p-r-20">
                            <spen class="content-text-color" :style="{ color: linearGradient.textColor }">{{ contentTitle }}</spen>
                            {{ contentSubTitle }}
                        </div>
                    </slot>
                </div>
            </div>
        </div>

        <div v-else-if="type == 'thirdly'" class="thirdly-box">
            <div class="li-label-thirdly flex">
                <div class="li-label-thirdly-left" :style="{ background: `linear-gradient(to bottom left, ${linearGradient.startColor},${linearGradient.stopColor})` }">
                    <div class="li-label-thirdly-left-content">
                        <slot name="left">
                            <div class="li-label-thirdly-left-content-title">{{ indexTitle }}</div>
                            <div class="li-label-thirdly-left-content-index">{{ index }}</div>
                        </slot>
                    </div>
                </div>
                <div class="li-label-thirdly-right flex flex-row-around">
                    <svg class="li-label-thirdly-left-svg" width="30" height="100" viewBox="0 0 30 100">
                        <defs>
                            <linearGradient :id="`thirdly-linear-${theme}`" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" :stop-color="linearGradient.startColor" />
                                <stop offset="100%" :stop-color="linearGradient.stopColor" />
                            </linearGradient>

                            <linearGradient :id="`linear-stroke-${theme}`" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" :stop-color="linearGradient.startColor" />
                                <stop offset="100%" :stop-color="linearGradient.stopColor" />
                            </linearGradient>
                        </defs>
                        <polygon class="thirdly-triangle" fill="#f7f7f7" stroke="#f7f7f7" stroke-linejoin="round" stroke-width="15" points="30,10 30,80 10,70 10,20"></polygon>
                    </svg>
                    <slot>
                        <div class="li-label-thirdly-right-content-space flex">
                            <div :class="[`iconfont`, contentIcon]"></div>
                        </div>
                        <div class="li-label-thirdly-right-content-line"></div>
                        <div class="li-label-thirdly-right-content-space p-r-20">
                            <spen class="content-text-color" :style="{ color: linearGradient.textColor }">{{ contentTitle }}</spen>
                            {{ contentSubTitle }}
                        </div>
                    </slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, onMounted, computed } from 'vue';

const props = defineProps({
    // 标签卡类型: around | second
    type: {
        type: String,
        default: 'around'
    },
    // 标签卡风格色系: green | purplish | orange | red | custom 自定义
    // 若要使用自定义则选择custom，并设置startColor和stopColor
    theme: {
        type: String,
        default: 'green'
    },
    // 起始颜色：仅用于 theme = custom
    startColor: {
        type: String,
        default: ''
    },
    // 终点颜色：仅用于 theme = custom
    stopColor: {
        type: String,
        default: ''
    },
    // 文字颜色
    textColor: {
        type: String,
        default: ''
    },
    // 序号 - 标题
    indexTitle: {
        type: String,
        default: 'Option'
    },
    // 序号 - 数字
    index: {
        type: String,
        default: '01'
    },
    // 内容 - 图标
    contentIcon: {
        type: String,
        default: 'icon-kefuchajian'
    },
    // 内容 - title
    contentTitle: {
        type: String,
        default: 'Label'
    },
    // 内容 - subtitle
    contentSubTitle: {
        type: String,
        default: 'label label label label label'
    }
});
let linearGradient = computed(() => {
    if (props.theme == 'custom' && props.startColor && props.stopColor) return { startColor: props.startColor, stopColor: props.stopColor, textColor: props.textColor };
    else {
        const colorBg = {
            green: { startColor: 'rgba(47, 203, 182,1)', stopColor: 'rgba(19, 122, 157,1)', textColor: '#27786f' },
            purplish: { startColor: '#d13396', stopColor: '#742fa0', textColor: '#9f3297' },
            orange: { startColor: '#f4a924', stopColor: '#f2582b', textColor: '#f37f24' },
            red: { startColor: '#f00017', stopColor: '#8b000d', textColor: '#b9000e' }
        };
        return colorBg[props.theme];
    }
});

const install = (app: any) => {
    app.component('LiLabel', this);
};
</script>

<style lang="less" scoped>
.li-label {
    display: inline-block;

    .around-box {
        margin: 20px;
        padding: 5px 0;
        border-radius: 20px;
        .li-label-around {
            position: relative;
            border-radius: 20px;
            width: 230px;
            height: 100px;
            border: 1px solid rgba(161, 180, 185, 0.2);
            box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0), -10px 12px 10px 0px rgba(0, 0, 0, 0.3), 6px 0px 6px 0px rgba(0, 0, 0, 0), 0px 15px 2px 0px rgba(0, 0, 0, 0);

            .li-label-around-left {
                position: absolute;
                top: -5px;
                left: -7px;

                .li-label-around-left-svg {
                }

                .triangle {
                    stroke-width: 100;
                    box-shadow: 0px 2px 6px 0px rgba(9, 85, 160, 0.3);
                }

                .li-label-around-left-content {
                    position: absolute;
                    top: 5px;
                    left: 15px;
                    width: 80px;
                    height: 80px;
                    color: #fff;
                    .li-label-around-left-content-title {
                        margin: 5px 5px 0px 5px;
                    }
                    .li-label-around-left-content-index {
                        margin: -10px 15px 0px 15px;
                        width: 50px;
                        height: 50px;
                        font-size: 40px;
                    }
                }
            }
            .li-label-around-right {
                float: right;
                .li-label-around-right-content {
                    width: 100px;
                    height: 100px;

                    .li-label-around-right-content-icon {
                        .iconfont {
                            font-size: 30px;
                        }
                    }
                    .li-label-around-right-content-line {
                        width: 70%;
                        height: 1px;
                        background-color: #282828;
                    }
                    .li-label-around-right-content-text {
                        line-height: 12px;
                        font-size: 10px;
                    }
                }
            }
        }
    }

    .second-box {
        border-radius: 50px;
        margin: 10px 10px 10px 10px;
        padding-right: 70px;
        .li-label-second {
            position: relative;
            border-radius: 50px;
            box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0), -10px 12px 10px 0px rgba(0, 0, 0, 0.3), 6px 0px 6px 0px rgba(0, 0, 0, 0), 0px 15px 2px 0px rgba(0, 0, 0, 0);

            .li-label-second-left {
                width: 240px;
                height: 120px;
                border-radius: 50px;

                .li-label-second-left-content {
                    position: absolute;
                    top: 20px;
                    left: 5px;
                    width: 80px;
                    height: 80px;
                    color: #fff;

                    .li-label-second-left-content-title {
                        margin: 5px 5px 0px 5px;
                    }
                    .li-label-second-left-content-index {
                        margin: -10px 15px 0px 15px;
                        width: 50px;
                        height: 50px;
                        font-size: 40px;
                    }
                }
            }
            .li-label-second-right {
                position: absolute;
                right: -70px;
                top: 10px;
                width: 240px;
                height: 100px;
                background-color: #e7e7e7;
                border-radius: 25px;

                .li-label-second-right-content-space {
                    flex: 1;
                    font-size: 10px;
                    line-height: 12px;
                    .iconfont {
                        font-size: 40px;
                    }
                }
                .li-label-second-right-content-line {
                    width: 1px;
                    height: 80px;
                    background-color: #c7c7c7;
                    margin: 0 20px 0 0px;
                }
            }
        }
    }

    .thirdly-box {
        margin: 10px;
        .li-label-thirdly {
            position: relative;

            .li-label-thirdly-left {
                width: 100px;
                height: 120px;
                border-radius: 10px;
                border: 1px solid #fbfbfb;
                box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0), -10px 12px 10px 0px rgba(0, 0, 0, 0.3), 6px 0px 6px 0px rgba(0, 0, 0, 0), 0px 15px 2px 0px rgba(0, 0, 0, 0);

                .li-label-thirdly-left-content {
                    position: absolute;
                    top: 20px;
                    left: 5px;
                    width: 80px;
                    height: 80px;
                    color: #fff;

                    .li-label-thirdly-left-content-title {
                        margin: 5px 5px 0px 5px;
                    }
                    .li-label-thirdly-left-content-index {
                        margin: -10px 15px 0px 15px;
                        width: 50px;
                        height: 50px;
                        font-size: 40px;
                    }
                }
            }
            .li-label-thirdly-right {
                position: relative;
                // right: -70px;
                // top: 10px;
                width: 200px;
                height: 100px;
                background-color: #fbfbfb;
                border-radius: 0px 25px 25px 0px;
                box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0), -10px 12px 10px 0px rgba(0, 0, 0, 0.3), 6px 0px 6px 0px rgba(0, 0, 0, 0), 0px 15px 2px 0px rgba(0, 0, 0, 0);
                border-top: 1px solid #fffbfa;
                border-right: 1px solid #fffbfa;
                border-bottom: 1px solid #fffbfa;

                .li-label-thirdly-left-svg {
                    position: absolute;
                    left: -30px;
                    top: 5px;

                    .thirdly-triangle {
                        // stroke-width: 100;
                    }
                }

                // &::before {
                //     content: ' ';
                //     position: absolute;
                //     left: -30px;
                //     top: 10px;
                //     width: 30px;
                //     background-color: #fbfbfb;
                //     height: 80px;
                // }

                .li-label-thirdly-right-content-space {
                    flex: 1;
                    font-size: 10px;
                    line-height: 12px;
                    .iconfont {
                        font-size: 40px;
                        margin-left: 10px;
                    }
                }
                .li-label-thirdly-right-content-line {
                    width: 1px;
                    height: 80px;
                    background-color: #c7c7c7;
                    margin: 0 20px 0 0px;
                }
            }
        }
    }

    .content-text-color {
        font-size: 14px;
    }
}
</style>
